<template>
  <el-row class="tac" :gutter="10">
    <el-col :span="4" class="Container">
      <el-tree :data="TreeeData" :props="defaultProps" :highlight-current="true"
               @node-click="handleNodeClick" ></el-tree>
    </el-col>
    <el-col :span="20" class="Container">
      <!--<el-row>
        <el-col :span="24">
          <template>
            &lt;!&ndash; Form &ndash;&gt;
            <el-button type="primary" class="el-icon-plus" size="small" @click="dialogFormVisible = true">添加</el-button>

            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
            </el-dialog>
          </template>
          <el-button type="primary" icon="delete" size="small">删除</el-button>
          <el-button type="primary" icon="edit" size="small">编辑</el-button>
          <el-button type="primary" icon="search" size="small">查看</el-button>
        </el-col>
      </el-row>-->
      <div class="block" style="margin-bottom: 10px;left: 10px;">
        <span class="wrapper">
          <template>
            <el-button type="primary" class="el-icon-plus" :disabled="false" @click="dialogFormVisible = true">添加</el-button>
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
            </el-dialog>
          </template>
          <el-button type="primary" icon="delete">删除</el-button>
          <el-button type="primary" icon="edit">编辑</el-button>
          <el-button type="primary" icon="search">查看</el-button>
        </span>
      </div>

      <el-table
        ref="singleTable"
        border
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 80%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="name"
          label="名称"
          width="150">
        </el-table-column>
        <el-table-column
          property="url"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          property="resourceType"
          label="资源类型">
        </el-table-column>
        <el-table-column
          property="status"
          label="状态">
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px;float: right">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
  export default{
    data() {
      return {
        TreeeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        tableData: [],
        currentRow: null,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      };
    },
    created(){
      this.getResourcesTree();
      //默认加载第一个
      this.initTable();
    },
    methods: {
      handleNodeClick(data) {
        this.getResourcesByPid(data.id);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      initTable(){
          console.log(this.TreeeData.children);
        //this.getResourcesByPid(this.TreeeData.id);
      },
      getResourcesTree(){
        this.$http.get(this.baseUrl + '/resources/type/0')
          .then(function (response) {
            // 这里是处理正确的回调
            this.TreeeData = response.data.dataList;
            // this.articles = response.data["subjects"] 也可以

          }, function (response) {
            // 这里是处理错误的回调
            console.log("错误鸟");
          });
      },
      getResourcesByPid(pId){
        this.$http.get(this.baseUrl + '/resources/child/' + pId)
          .then(function (response) {
            // 这里是处理正确的回调
            this.tableData = response.data.dataList;
            // this.articles = response.data["subjects"] 也可以
          }, function (response) {
            // 这里是处理错误的回调
            console.log("错误鸟");
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style>
  .tac{
    height: 100%;
    width: 100%;
  }
  .Container{
    height: 100%;
    border: 1px solid aliceblue;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
